<template>
  <div class="jinping">
    <div class="vip">精品推荐</div>
    <div class="look">你值得拥有的优质内容</div>
    <div class="neir">
      <ul>
        <li v-for="(key,item) in imgArr">
          <div class="text">
            <div class="timg">
              <img :src=imgArr[item] alt="">
            </div>
            <div class="text2">
              <p class="p1">{{p1[item]}}</p>
              <p class="p2">{{p2[item]}}</p>
            </div>

          </div>

        </li>
      </ul>
    </div>
    <div class="btn">
          <span>
            全部精品电台
             <van-icon name="arrow" class="ic"/>
          </span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "jinping",
      data(){
          return{
            imgArr:[require('../../img/jp1.png'),require('../../img/jp2.png'),require('../../img/jp3.png')],
            p1:['20本经典轻松听懂改变某个未来','金牌词人的中国风创作小课堂','阿杰与杨天翔再续家国传奇'],
            p2:['¥   98','¥   69','¥   19.9'],
          }
      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .jinping{

    width: 1245px;
    margin-top: 70px;
    background: linear-gradient(to  bottom,#3D3A2C , #998864,#908F91);
  .vip{
    text-align: center;
    font-size: 50px;
    color: white;
    font-weight: bold;

    box-sizing: border-box;
    padding-top: 50px;
  }
  .look{
    text-align: center;
    font-size: 35px;
    color:#bcadac;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 65px;
  }
  .neir{
    padding: 0 15px;
    box-sizing: border-box;
    ul{
      font-size: 0;
      li{

        display: inline-block;
        font-size: 40px;
        width: 33.3333333%;
        .text{
          margin-left: 3px;
          border-radius: 15px;
          width: 395px;
          background-color: white;
         .timg{
           width: 395px;
           height: 395px;
           img{
             border-radius: 15px;
             width: 395px;
             height: 395px;

           }
         }

          .text2{
            height: 195px;
            .p1{
              padding-left: 12px;
              box-sizing: border-box;
              padding-top: 25px;
              font-size: 35px;

              background-color: #fff;
              width: 325px;
            }
            .p2{
              padding-left: 12px;
              color: red;
              font-size: 35px;
             padding-top: 15px;
              box-sizing: border-box;
            }
          }

        }


      }
    }
  }
  .btn{
    text-align: center;

  span{
    display: inline-block;
    padding: 25px 45px;
    margin: 60px 0;
    color: white;
    font-size: 40px;
    border: 3px solid #594b4f;
    border-radius: 50px;
  }
  .ic{
    color: #594b4f;
    width: 25px;
    vertical-align: middle;
  }
  }
  }
</style>
